<template>
  <div class="item">
    <a :href="href" target="_blank">
      <div class="content">
        <h3>{{ title }}</h3>
        <p class="describe">{{describe}}</p>
        <p class="fot">
          <span class="pic"></span><span class="language">{{type}}</span>
        </p>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: "ProjectItem",
  data() {
    return {}
  },
  props: {
    title: {
      type: String,
      required: true,
    },
    describe: {
      type: String,
      required: true,
    },
    href: {
      type: String,
      default: '#'
    },
    type: String
  },
  methods: {},
  mounted() {
  }
}
</script>

<style lang="stylus" scoped>
.item
  width: 30%;
  height 180px
  display: inline-block;
  vertical-align middle
  border: 1px solid $borderColor;
  margin: 10px;
  box-shadow: 0 0 8px 0 $borderColor;
  transition: all .3s linear;
  padding 30px 20px 20px
  overflow: hidden;

  a
    text-decoration none;
    color $textColor;

    .content
      height 130px
      display flex
      flex-direction column
      justify-content space-between

      h3
        color $textColor
      .describe
        color $textColor
        font-size 14px
        padding-top 15px
        overflow hidden
        text-overflow ellipsis;
        display -webkit-box;
        line-clamp 2;
        -webkit-line-clamp 2;
        -webkit-box-orient vertical;
      .pic
        position: relative;
        top: 1px;
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #f1e05a;
      .language
        color $textColor
        padding-left 10px

  &:hover
    box-shadow: 0 0 12px 0 $darkBorderColor;
    text-decoration none !important;

@media (max-width: $MQMobile)
  .item
    width: 100%;
    margin 0 0 15px 0
</style>
